import { animate, query, stagger, style, transition, trigger } from '@angular/animations';

export const listAnimation = [
    trigger('itemAnimation', [
        transition('void=>*', [
            style({
                height: 0,
                opacity: 0,
                transform: 'translateY(-50px)'
            })
        ])
    ]),
    trigger('listAnimation', [
        transition('*=>*', [
            query(
                ':enter',
                [
                    style({
                        opacity: 0,
                        height: 0,
                        transform: 'translateY(50px)'
                    }),
                    stagger(40, [animate('700ms cubic-bezier(.77, 0, .175, 1)', style('*'))])
                ],
                { optional: true }
            )
        ])
    ])
];
